<template>
  <el-dialog v-model="show" title="添加饭店" width="1100px" append-to-body :close-on-click-modal="false">
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="饭店名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入饭店名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="diningList" row-key="id" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable="selectable" />
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="饭店图片" align="center" prop="photos" width="150">
        <template #default="scope">
          <el-image style="width: 40px;height: 40px" :src="scope.row.photos.split(',')[0]" :preview-src-list="scope.row.photos.split(',')" />
        </template>
      </el-table-column>
      <el-table-column label="饭店名称" align="center" prop="name" />
      <el-table-column label="饭店地址" align="center" prop="addName" :show-overflow-tooltip="true" />
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total>0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="sure">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { getCurrentInstance, ref, toRefs, watch } from 'vue'
import { reactive } from '@vue/runtime-core'
import { addDiningToMatch, getMatchDining } from '@/api/logex/activity'
import _ from 'lodash'
import { listRestaurant } from '@/api/logex/food'


const emit = defineEmits(['complete'])
const { proxy } = getCurrentInstance()

let matchId = null

const show = ref(false)
const diningList = ref([])
const loading = ref(true)
const total = ref(0)
const ids = ref([])
const chooseDinings = ref([])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    status: '1'
  }
})

const { queryParams } = toRefs(data)

watch(show, (val) => {
  if (!val) {
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      name: undefined,
      status: '1'
    }

    diningList.value = []
    total.value = 0
    ids.value = []
    matchId = null
  }
})

function getList() {
  loading.value = true
  listRestaurant(queryParams.value).then(response => {
    diningList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
}


function sure() {
  if (ids.value.length === 0) {
    proxy.$modal.msgWarning('请选择饭店')
    return
  }

  addDiningToMatch({
    activityId: matchId,
    restaurantIds: ids.value.join(',')
  }).then((res) => {
    proxy.$modal.msgSuccess(res.msg)
    show.value = false
    emit('complete', matchId)
  })
}

function selectable(row) {
  return !_.some(chooseDinings.value, (h) => {
    return h.restaurantId === row.id
  })
}

function open(params) {
  show.value = true
  matchId = params.matchId
  getList()

  chooseDinings.value = []
  getMatchDining({
    activityId: matchId
  }).then(res => {
    chooseDinings.value = res.rows
  })
}
defineExpose({
  open
})

</script>

<style scoped>

</style>
